<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>   

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ロール情報設定</title>

   <jsp:include page="../basePage/head.jsp" /> 
   <script src="./js/jqgrid/jqgrid_custom_element.js"></script>
   <script>
   	 $(function(){   		
		// 配置jqGrid组件  
			var $gridTable=$("#gridTable").jqGrid({ 
				
				url:"roleInfoQuery!refreshGridModel.action",
				datatype:'json',
	    		//datatype:'local',
	         	     
	         	mtype: "GET",  
	         	height: $("#container").height()-105,//$("#dataForm").height(),
	         	
	         	autowidth: false,  
	         	colNames: ["id","ロールID","ロール名","権限"],
	        	colModel: [                                      
	               	  
					{name:"id",index:"roleID"},
	
	        	    {name:"roleID",index:"roleID",width:60,sortable:true, resizable:true, frozen : false,
		               		editable:true,editoptions:{size:30},editrules:{required:true},formoptions:{elmprefix:'(*)'}},
		               		
	               	{name:"roleName",index:"roleName",width:120,sortable:true, align:"left", resizable:true, frozen : false,
	               		editable:true,editoptions:{size:30},editrules:{required:true},formoptions:{elmprefix:'(*)'}},	

	               	{name:"permissions",index:"permissions",width:500,sortable:true, resizable:true, frozen : false,
	               			editable:true,editoptions:{size:30},editrules:{required:true},formoptions:{},
	               			  //  edittype:'select'  
	        //       			 ,editoptions:{multiple:true,value:{1:'One',2:'Two'}}
	               			edittype:'custom'
	               			,editoptions:{ custom_element:MultiCheckElem, custom_value:MultiCheckVal, list:'权限A,权限B,权限C'}
	        }
	         	],
	         	viewrecords: true,  
	         	rowNum: 25,  
	         	rowList: [25,50,100],  
	         	loadonce: true,
	         	jsonReader: {  
	             	root:"gridModel",        
	             	records: "record",      
	             	repeatitems : false    
	         	},  
	         	pager: "#gridPager",  
	         	caption: "権限情報",           	
	         	toolbar: [false,"top"] ,         
				rownumbers: true, 
				rownumWidth: 20,
				shrinkToFit: false ,
				editurl:"roleInfoModify.action"		 
	     	});
		
			$gridTable.jqGrid('hideCol',["id"]);
			
			$.ajax({
		        type: "POST",
		        async: false,
		        url:"roleInfoModify!getPremissionArray.action",		       
				success: function (data) {
					//alert(data.permissions);
					$gridTable.setColProp('permissions',{editoptions:{custom_element:MultiCheckElem, custom_value:MultiCheckVal,list:data.permissions}});					
				},
		        error: function (err) {
					//alert(err);
		        }
		    });

			
			$gridTable.jqGrid('navGrid','#gridPager',
					{ },//options
					{height:460,width:400,reloadAfterSubmit:false,
						 beforeShowForm: function(frm) { 
					            $('#roleID').attr('readonly','readonly');
					        }
					}, // edit options 
					{height:460,width:400,reloadAfterSubmit:false,
						 beforeShowForm: function(frm) { 
					            $('#roleID').removeAttr('readonly','readonly'); 					            
					           // $("select").multiselect({selectedList: 1,header:false, multiple: true,noneSelectedText:""}) ;					            
					        }					        
					}, // add options 
					{reloadAfterSubmit:false}, // del options 
					{} // search options 
					);
			
			$gridTable.jqGrid('navButtonAdd','#gridPager',
					{ caption: "",
				title: "列を表示／隠す", 
				onClickButton : function ()
				{ jQuery("#gridTable").jqGrid('columnChooser'); }
					});
			
									 
			  $(window).bind('resize', function() {				 
					$("#gridTable").setGridWidth($("#dataForm").width()-5);	    
				 	$("#gridTable").setGridHeight ($(window).height()-88);	    	 
			 }).trigger('resize');	  
			 
			  
		/* 	  $("#sel").multiselect({selectedList: 1,header:false, multiple: true,noneSelectedText:""}) ;	 */		  
	 }); 
	 
	</script>
</head>

<body style="font-size:15px;font-weight:400;margin: 0;padding:">
<s:form id="dataForm" theme="simple" ></s:form>
<table id="gridTable" style="margin: 0;padding: 0"></table> 
<div id="gridPager" style="height:38px;margin: 0;padding: 0"></div>  	 

 
<div id="noResult" title="メッセージ" style="display:none;">
 <p> 検索の内容ありません。 </p>
</div>

</body>
</html>